<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          type="primary"
          @click="toQuery"
          size="mini">
          查询结果
        </el-button>
        <el-button
          @click="resetSearch"
          style="float: right;margin-right: 15px"
          size="mini">
          重置
        </el-button>
      </div>
      <div style="margin-top: 20px">
        <el-form :inline="true" size="small" label-width="140px">
          <el-form-item label="手机号码：">
            <el-input style="width: 180px" v-model="query.phone" placeholder="请输入手机号码" clearable
                      @change="toQuery"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input style="width: 180px" v-model="query.email" placeholder="邮箱" clearable
                      @change="toQuery"></el-input>
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker
              @change="toQuery"
              v-model="query.time"
              type="datetimerange"
              range-separator=":"
              class="el-range-editor--small filter-item"
              style="float: right;height: 30.5px;width: 350px"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-table v-loading="loading" border style="margin-top: 15px" :data="data" row-key="id" size="small">
      <el-table-column fixed="left" width="180" align="center" label="手机号码" prop="phone"/>
      <el-table-column fixed="left" width="250" align="center" label="邮箱" prop="email"/>
      <el-table-column align="center" width="180" prop="createTime" label="时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="left" align="center" label="内容" prop="content"/>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
  import initData from '@/mixins/initData'
  import {parseTime} from '@/utils/index'

  export default {
    mixins: [initData],
    name: "index",
    created() {
      this.init()
    },
    methods:{
      parseTime,
      beforeInit() {
        this.url = 'api/customer'
        this.params = {page: this.page, size: this.size}
        const query = this.query
        if (query.phone) {
          this.params['phone'] = query.phone
        }
        if (query.email) {
          this.params['email'] = query.email
        }
        if (query.time && query.time.length > 0) {
          this.params['startTime'] = query.time[0]
          this.params['endTime'] = query.time[1]
        }
        return true
      },
      resetSearch() {
        this.query = {}
        this.init()
      },
    }
  }
</script>

<style scoped>

</style>
